import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Button, message, Select, DatePicker, Modal, Input } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import ProTable from '@ant-design/pro-table';
import router from 'umi/router';
import styles from './index.less';
import moment from 'moment';
import { fileDownload } from '@/utils/downExcel';
import { useActivate } from 'react-activation';
import AuthComponent from '@/components/Authorized/AuthComponent';
import { _lostCategory, _customsSupervision, _articlesState, _closeState } from './components/_data'
import ClaimForm from './components/ClaimForm'
import ScrappedPerishableGoods from './components/ScrappedPerishableGoods'
import { lostPageList, getAllPutStoragePeople, deleteLostArticles, lostArticlesClaim, handoverOfContraband, exportChart } from './service'
import { lostGetForm } from '../reportPrint/service'
import { getImgByRelevance, addUpdateLostArticlesInfo } from '../lostItemForm/service'
import PicUpload from '../lostItemForm/components/PicUpload'
import ShowPic from '../lostItemForm/components/ShowPic'

// 变量
let hiddenData = {
  flightDate: moment()
}

const { Option } = Select;

const LostItemInfoManage = () => {

  // 遗失物品基础信息
  const stateStr = sessionStorage.getItem('/lostItemManage/lostItemDetail');
  const stateObj = stateStr ? JSON.parse(stateStr) : {};

  const actionRef = useRef();
  const ref = useRef()

  // 表格高度
  const [height, controlH] = useState(300)
  // 表格是否折叠
  const [isCollapse, controlC] = useState(true);
  // 认领弹窗显隐
  const [claimVisible, handleClaimVisible] = useState(false)
  // 报废易腐物品弹窗显隐
  const [scrappedPerishableGoodsVisible, handleScrappedPerishableGoodsVisible] = useState(false)
  // 保存搜索数据
  const [searchData, handleSearchData] = useState({})
  // 多选
  const [selectedRowKeys, handleSelectedRowKeys] = useState([])
  // 是否有图片
  const [lostItemPic, handleLostItemPicture] = useState({ goodFileList: [], touristFileList: [], paperFileList: [] })
  // 初始图片数组
  const [originPicArr, handleOriginPicArr] = useState([])
  // 图片上传弹窗显隐
  const [lostItemPicVisible, handleLostItemPicVisible] = useState(false)
  // 图片管理弹窗显隐
  const [lostItemPicManageVisible, handleLostItemPicManageVisible] = useState(false)
  // 表格是否有数据
  const [exportFlag, handleExportFlag] = useState(false)

  // 获取所有入库人接口
  const { data: getAllPutStoragePeopleD = [] } = useRequest(getAllPutStoragePeople);

  // 单个table行的数据
  const [itemData, setItemData] = useState({});
  // 删除接口
  const { run: deleteLostArticlesR } = useRequest(params => deleteLostArticles(params), {
    manual: true,
    onSuccess: (res) => {
      message.success('删除成功')
      actionRef.current.reload()
    }
  })
  // 移交接口
  const { run: handoverOfContrabandR } = useRequest(params => handoverOfContraband(params), {
    manual: true,
    onSuccess: (res) => {
      message.success('移交成功')
      actionRef.current.reload()
    }
  })
  // 导出报表接口
  const { run: runExport } = useRequest(params => exportChart(params, hiddenData), {
    manual: true,
    onSuccess: data => {
      fileDownload(
        data,
        '遗失物品信息数据.xlsx'
      );
    },
  });
  // 领取报表
  const { run: lostGetFormR } = useRequest(params => lostGetForm(params), {
    manual: true,
    onSuccess: data => {
      sessionStorage.setItem(
        '/lostItemManage/reportPrint',
        JSON.stringify({ url: data, type: 'claim' })
      )
      router.push('/banksearchSystem/lostItemManage/reportPrint')
    }
  })
  // 遗失物品图片接口
  const { run: getImgByRelevanceR } = useRequest(params => getImgByRelevance(params), {
    manual: true,
    onSuccess: (res) => {
      handleOriginPicArr(res)
      let goodFileListData = res.filter(item => {
        return item.oneType === 1
      })

      let touristFileListData = res.filter(item => {
        return item.oneType === 2
      })

      let paperFileListData = res.filter(item => {
        return item.oneType === 3
      })

      handleLostItemPicture({ goodFileList: goodFileListData, touristFileList: touristFileListData, paperFileList: paperFileListData })

      if (goodFileListData.length === 0 && touristFileListData.length === 0 && paperFileListData.length === 0) {
        handleLostItemPicVisible(true)
      } else {
        handleLostItemPicManageVisible(true)
      }
    }
  })
  // 新增、编辑遗失物品接口
  const { run: addUpdateLostArticlesInfoR } = useRequest(params => addUpdateLostArticlesInfo(params), {
    manual: true,
    onSuccess: (res, params) => {
      message.success('修改图片成功')
      handleLostItemPicVisible(false)
      handleLostItemPicManageVisible(false)
    },
    onError: (res) => {
      message.error('修改图片失败')
    }
  })


  // 入库开始时间禁用
  const disabledStorageStartDate = (current) => {
    return ref.current.getFieldsValue().putStorageEnd && current && moment(current).endOf('day') > ref.current.getFieldsValue().putStorageEnd.endOf('day');
  }

  // 入库结束时间禁用
  const disabledStorageEndDate = (current) => {
    return ref.current.getFieldsValue().putStorageStart && current && moment(current).endOf('day') < ref.current.getFieldsValue().putStorageStart.endOf('day');
  }

  // 航班号格式化
  const formatFlightNo = val => {
    if (!val) {
      return '';
    } else if (val.length < 3 || /^\D/.test(val)) {
      return ''.toUpperCase.call(val);
    } else if (/^\d{2}/.test(val)) {
      return `3U${val}`;
    } else {
      return val;
    }
  };

  // 多选改变时方法
  const onSelectChange = selectedRowKeys => {
    handleSelectedRowKeys(selectedRowKeys)
  };

  // 多选
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange
  };

  // 清空选择性
  const clearSelection = () => {
    handleSelectedRowKeys([])
  };

  // 过滤遗失物品类别
  const fitlerLostCategory = (v) => {
    if (v === 1) {
      return '食品、药品、保健品、香烟、酒水等入口物品，生活日用品、服装鞋帽、工艺品（含字画）、书籍等无价值物品'
    } else if (v === 2) {
      return '鲜活、易腐物品'
    } else if (v === 3) {
      return '军用品、历史文物、珍贵图书类'
    } else if (v === 4) {
      return '珠宝玉石、证件、银行卡等物品'
    } else if (v === 5) {
      return '现金、有价票据、贵金属'
    } else if (v === 6) {
      return '电子类、虫草类物品'
    } else if (v === 7) {
      return '违禁物品'
    } else if (v === 8) {
      return '贵重物品'
    }
  }


  // 点击搜索
  const beforeSearchSubmit = params => {

    if (!params.putStorageStart) delete params.putStorageStart;
    if (!params.putStorageEnd) delete params.putStorageEnd;
    if (!params.flightDate) delete params.flightDate;

    if (!isCollapse) {
      if (event.target.querySelector('span').innerText === '查 询') {
        if (!params.flightDate) delete hiddenData.flightDate
      } else if (event.target.querySelector('span').innerText === '重 置') {
        ref.current.setFieldsValue({
          flightDate: moment()
        })
        hiddenData = {
          flightDate: moment()
        }
      }
      handleSearchData(params)
      return params
    } else {
      if (event.target.querySelector('span').innerText === '查 询') {
        if (Object.keys(params).indexOf('putStorageStart') === -1) {
          params.putStorageStart = ''
        }
        if (Object.keys(params).indexOf('putStorageEnd') === -1) {
          params.putStorageEnd = ''
        }
        handleSearchData({ ...hiddenData, ...params })
        return { ...hiddenData, ...params }
      } else if (event.target.querySelector('span').innerText === '重 置') {
        params.flightDate = moment()
        hiddenData = {
          flightDate: moment()
        }
        handleSearchData({ ...hiddenData, ...params })
        return { ...hiddenData, ...params }
      }
    }

  }

  // 新增
  const add = () => {
    router.push('/banksearchSystem/lostItemManage/lostItemForm')
    sessionStorage.setItem(
      '/lostItemManage/lostItemForm',
      JSON.stringify({ type: 'add', random: Math.random() })
    )
  }

  // 编辑
  const edit = (selectedRows) => {
    if (selectedRows.length === 1) {
      if (selectedRows[0].closeState === 2) {
        message.warning('请选择未结案遗失物品')
      } else {
        sessionStorage.setItem(
          '/lostItemManage/lostItemForm',
          JSON.stringify({ type: 'edit', random: Math.random(), lostNumber: selectedRows[0].lostNumber })
        )
        router.push('/banksearchSystem/lostItemManage/lostItemForm?id=' + selectedRows[0].lostNumber)
      }
    } else {
      message.warning('请选择一项遗失物品')
    }
  }

  // 删除
  const del = (selectedRows) => {
    if (selectedRows.length === 0) {
      message.warning('请至少选择一项')
    } else {
      Modal.confirm({
        title: '删除',
        content: '确认删除该数据？',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          let ids = []
          selectedRows.map(item => {
            ids.push(item.lostNumber)
          })
          deleteLostArticlesR({ lostNumbers: ids.join(',') })
        }
      });
    }
  }

  // 领取
  const receive = (selectedRows) => {
    if (selectedRows.length === 1) {
      if (selectedRows[0].articlesState === 2 && selectedRows[0].closeState === 1) {
        handleClaimVisible(true)
      } else {
        message.warning('请选择入库未结案遗失物品')
      }
    } else {
      message.warning('请选择一项遗失物品')
    }
  }

  // 领取回调
  const handleClaim = async fields => {
    try {
      await lostArticlesClaim({
        lostNumber: selectedRowKeys[0],
        ...fields
      }).then((res) => {
        lostGetFormR(res)
      })
      return true
    } catch (error) {
      message.error('领取失败请重试！');
      return false;
    }
  };

  // 移交
  const transfer = (selectedRows) => {
    if (selectedRows.length === 1) {
      Modal.confirm({
        title: '移交',
        content: '确认移交该数据？',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          handoverOfContrabandR({ lostNumber: selectedRows[0].lostNumber })
        }
      });
    } else {
      message.warning('请选择一项遗失物品')
    }
  }

  // 导出
  const exportCharts = () => {
    if (!exportFlag) {
      message.warning('表格数据为空');
    } else {
      runExport(searchData);
    }
  };

  // 打印
  const printIt = (selectedRows) => {
    if (selectedRows && selectedRows.length !== 0) {
      let idList = selectedRows.map(item => item.lostNumber);
      router.push({
        pathname: '/banksearchSystem/lostItemManage/printPage',
        state: {
          accidentId: idList.join(',')
        }
      });
    }
  };

  // 新增图片/改变图片
  const handleImgs = async fields => {

    let img = []
    let obj = {};

    for (let category in fields) {
      fields[category].forEach(imgInfo => {
        imgInfo.relevance = stateObj.lostNumber
        img.push(imgInfo)
      })
    }

    // 修改后带有id(原本存在后台)的图片
    let lostItemPicIdArr = img.filter(item => {
      return item.id
    })
    // 新增加的图片
    let lostItemPicNotIdArr = img.filter(item => {
      return !item.id
    })
    // 找到被删除图片加上remark:1
    let updateArr = originPicArr.concat(lostItemPicIdArr).filter(function (v, i, arr) {
      if (arr.indexOf(v) === arr.lastIndexOf(v)) {
        v.remark = 1
      }
      return arr
    });
    // 去重
    updateArr = updateArr.reduce(function (item, next) {
      obj[next.id] ? '' : obj[next.id] = true && item.push(next);
      return item;
    }, []);

    addUpdateLostArticlesInfoR({ lostNumber: stateObj.lostNumber, lostCategory: stateObj.lostCategory, img: [...updateArr, ...lostItemPicNotIdArr] })
  };

  // 删除图片
  const handleDelImgs = async fields => {
    let img = []
    let obj = {};
    for (let category in fields) {
      fields[category].forEach(imgInfo => {
        img.push(imgInfo)
      })
    }

    // 找到被删除图片加上remark:1
    let updateArr = originPicArr.concat(img).filter(function (v, i, arr) {
      if (arr.indexOf(v) === arr.lastIndexOf(v)) {
        v.remark = 1
      }
      return arr
    });
    // 去重
    updateArr = updateArr.reduce(function (item, next) {
      obj[next.id] ? '' : obj[next.id] = true && item.push(next);
      return item;
    }, []);

    addUpdateLostArticlesInfoR({ lostNumber: stateObj.lostNumber, lostCategory: stateObj.lostCategory, img: updateArr })
  }

  useEffect(() => {
    if (isCollapse) {
      controlH(document.body.clientHeight - 440);
    } else {
      controlH(document.body.clientHeight - 585);
    }
  }, [isCollapse])

  // 切换tab清空搜索
  useEffect(() => {
    hiddenData = {
      flightDate: moment()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  // 缓存
  useActivate(() => {
    actionRef.current.reload()
  })

  const columns = [
    {
      title: '入库开始日期',
      dataIndex: 'putStorageStart',
      width: 200,
      renderFormItem: (_, { onChange, value, ...rest }) => {
        const format = 'YYYY-MM-DD';
        return (
          <DatePicker
            onChange={onChange}
            format={format}
            value={value}
            disabledDate={disabledStorageStartDate}
            {...rest}
          />
        );
      },
      hideInTable: true
    },
    {
      title: '入库结束日期',
      dataIndex: 'putStorageEnd',
      width: 200,
      renderFormItem: (_, { onChange, value, ...rest }) => {
        const format = 'YYYY-MM-DD';
        return (
          <DatePicker
            onChange={onChange}
            format={format}
            value={value}
            disabledDate={disabledStorageEndDate}
            {...rest}
          />
        );
      },
      hideInTable: true
    },
    {
      title: '遗失物品编号',
      dataIndex: 'lostNumber',
      width: 140,
      // eslint-disable-next-line jsx-a11y/anchor-is-valid
      render: (text, record) => (<a onClick={() => {
        sessionStorage.setItem(
          '/lostItemManage/lostItemDetail',
          JSON.stringify({ type: 'see', random: Math.random(), lostNumber: text, lostCategory: record.lostCategory })
        )
        router.push('/banksearchSystem/lostItemManage/lostItemDetail?id=' + text)
      }}>{text}</a>),
      fixed: 'left',
      hideInSearch: true
    },
    {
      title: '遗失物品类别',
      dataIndex: 'lostCategory',
      width: 200,
      renderFormItem: (_, { onChange, value }) => {
        return (
          <Select
            allowClear={true}
            showSearch
            placeholder='请选择'
            filterOption={true}
            optionFilterProp="children"
            onChange={onChange}
            value={value ? value : undefined}
          >
            {
              _lostCategory && _lostCategory.length && _lostCategory.map((v, i) => {
                return (
                  <Option key={v.id} title={v.name}>{v.name}</Option>
                )
              })
            }
          </Select>
        );
      },
      render: (text, record) => (
        <div className={styles.lostItemType} title={fitlerLostCategory(text)}>{fitlerLostCategory(text)}</div>
      )
    },
    {
      title: '遗失物品名称',
      dataIndex: 'lostArticlesName',
      width: 200,
      // eslint-disable-next-line jsx-a11y/anchor-is-valid
      render: (text, _) => (<a>{text}</a>),
      ellipsis: true
    },
    {
      title: '遗失物品特征',
      dataIndex: 'lostFeature',
      width: 200,
      // eslint-disable-next-line jsx-a11y/anchor-is-valid
      render: (text, _) => (<a>{text}</a>),
      ellipsis: true
    },
    {
      title: '航班号',
      dataIndex: 'flightNumber',
      width: 120,
      renderFormItem: (_, { value, onChange }) => {
        return <Input
          onChange={e => {
            let value = formatFlightNo(e.target.value);
            onChange(value);
          }}
          value={value}
          allowClear
          maxLength={6}
          placeholder="3U" />;
      }
    },
    {
      title: '航班日期',
      dataIndex: 'flightDate',
      width: 120,
      renderFormItem: (_, { onChange, value, ...rest }) => {
        const format = 'YYYY-MM-DD';
        return (
          <DatePicker
            onChange={onChange}
            format={format}
            value={value}
            {...rest}
          />
        );
      },
    },
    {
      title: '海关监督',
      dataIndex: 'customsSupervision',
      width: 200,
      renderFormItem: (_, { onChange, value }) => {
        return (
          <Select
            allowClear={true}
            showSearch
            placeholder='请选择'
            filterOption={true}
            optionFilterProp="children"
            onChange={onChange}
            value={value ? value : undefined}
          >
            {
              _customsSupervision && _customsSupervision.length && _customsSupervision.map((v, i) => {
                return (
                  <Option key={v.id}>{v.name}</Option>
                )
              })
            }
          </Select>
        );
      },
      hideInTable: true
    },
    {
      title: '是否海关监督',
      dataIndex: 'isCustomsSupervision',
      width: 120,
      render: (text, record) => (
        <span>
          {record.customsSupervision === 1 ? '是' : ''}
          {record.customsSupervision === 2 ? '否' : ''}
        </span>
      ),
      hideInSearch: true
    },
    {
      title: '遗失物品状态',
      dataIndex: 'articlesState',
      width: 120,
      renderFormItem: (_, { onChange, value }) => {
        return (
          <Select
            allowClear={true}
            showSearch
            placeholder='请选择'
            filterOption={true}
            optionFilterProp="children"
            onChange={onChange}
            value={value ? value : undefined}
          >
            {
              _articlesState && _articlesState.length && _articlesState.map((v, i) => {
                return (
                  <Option key={v.id}>{v.name}</Option>
                )
              })
            }
          </Select>
        );
      },
      render: (text, record) => (
        <a>
          {text === 1 ? '回收' : ''}
          {text === 2 ? '入库' : ''}
          {text === 3 ? '旅客领取' : ''}
          {text === 4 ? '报废' : ''}
          {text === 5 ? '移交' : ''}
          {text === 6 ? '交接' : ''}
        </a>
      ),
    },
    {
      title: '入库日期',
      dataIndex: 'putStorageTime',
      width: 120,
      hideInSearch: true,
      ellipsis: true
    },
    {
      title: '结案状态',
      dataIndex: 'closeState',
      width: 120,
      renderFormItem: (_, { onChange, value }) => {
        return (
          <Select
            allowClear={true}
            showSearch
            placeholder='请选择'
            filterOption={true}
            optionFilterProp="children"
            onChange={onChange}
            value={value ? value : undefined}
          >
            {
              _closeState && _closeState.length && _closeState.map((v, i) => {
                return (
                  <Option key={v.id}>{v.name}</Option>
                )
              })
            }
          </Select>
        );
      },
      render: (text, record) => (
        <span>
          {text === 1 ? '未结案' : ''}
          {text === 2 ? '已结案' : ''}
        </span>
      ),
    },
    {
      title: '入库人',
      dataIndex: 'putStoragePeople',
      width: 120,
      renderFormItem: (_, { onChange, value }) => {
        return (
          <Select
            allowClear={true}
            showSearch
            placeholder='请选择'
            filterOption={true}
            optionFilterProp="children"
            onChange={onChange}
            value={value ? value : undefined}
          >
            {
              getAllPutStoragePeopleD && getAllPutStoragePeopleD.length && getAllPutStoragePeopleD.map((v, i) => {
                return (
                  <Option key={v}>{v}</Option>
                )
              })
            }
          </Select>
        );
      },
      hideInTable: true
    },
    {
      title: '图片管理',
      dataIndex: 'picManage',
      width: 120,
      render: (text, record) => (<a onClick={() => {
        if (AuthComponent.getAuth('lostItemManage.lostItemInfoManage.basic')) {
          setItemData(record);
          sessionStorage.setItem(
            '/lostItemManage/lostItemDetail',
            JSON.stringify({ type: 'see', random: Math.random(), lostNumber: record.lostNumber, lostCategory: record.lostCategory })
          )
          getImgByRelevanceR({ relevance: record.lostNumber })
        }
      }}>图片管理</a>),
      hideInSearch: true
    },
    {
      title: '报废人',
      dataIndex: 'scrapPeople',
      width: 120,
      hideInSearch: true
    },
    {
      title: '报废时间',
      dataIndex: 'scrapTime',
      width: 120,
      hideInSearch: true,
      ellipsis: true
    },
    {
      title: '回收人',
      dataIndex: 'recyclePeople',
      width: 120,
      hideInSearch: true
    },
    {
      title: '回收时间',
      dataIndex: 'recycleTime',
      width: 120,
      hideInSearch: true,
      ellipsis: true
    },
  ];
  return (
    <>
      <ProTable
        actionRef={actionRef}
        formRef={ref}
        rowKey="lostNumber"
        className={styles.lostItemInfoManage}
        headerTitle={
          <div>
            <span style={{ fontWeight: "700", color: "rgba(0,0,0,0.85)", fontSize: '16px' }}>遗失物品信息数据列表</span>
          </div>
        }
        options={{ fullScreen: true, reload: false, setting: true, density: false }}
        rowSelection={rowSelection}
        beforeSearchSubmit={beforeSearchSubmit}
        search={{
          span: 6,
          onCollapse: val => {
            controlC(val)
            if (!val && hiddenData) {
              ref.current.setFieldsValue({
                lostArticlesName: hiddenData.lostArticlesName,
                lostFeature: hiddenData.lostFeature,
                flightNumber: hiddenData.flightNumber,
                flightDate: hiddenData.flightDate,
                customsSupervision: hiddenData.customsSupervision,
                articlesState: hiddenData.articlesState,
                closeState: hiddenData.closeState,
                putStoragePeople: hiddenData.putStoragePeople
              })
            } else {
              hiddenData = ref.current.getFieldsValue()
            }
          },
        }}
        toolBarRender={(action, { selectedRows }) => [
          <AuthComponent authCode='lostItemManage.lostItemInfoManage.basic'>
            <Button type="primary" onClick={() => add()} size="small">
              新增
            </Button>
          </AuthComponent>,
          <AuthComponent authCode='lostItemManage.lostItemInfoManage.edit'>
            <Button type="primary" onClick={() => edit(selectedRows)} size="small">
              修改
            </Button>
          </AuthComponent>,
          <AuthComponent authCode='lostItemManage.lostItemInfoManage.del'>
            <Button type="primary" onClick={() => del(selectedRows)} size="small">
              删除
            </Button>
          </AuthComponent>,
          <AuthComponent authCode='lostItemManage.lostItemInfoManage.basic'>
            <Button type="primary" onClick={() => receive(selectedRows)} size="small">
              认领打印
            </Button>
          </AuthComponent>,
          <AuthComponent authCode='lostItemManage.lostItemInfoManage.basic'>
            <Button type="primary" onClick={() => transfer(selectedRows)} size="small">
              违禁物品移交
            </Button>
          </AuthComponent>,
          <AuthComponent authCode='lostItemManage.lostItemInfoManage.basic'>
            <Button type="primary" onClick={() => {
              handleScrappedPerishableGoodsVisible(true)
            }} size="small">
              报废易腐物品
            </Button>
          </AuthComponent>,
          <AuthComponent authCode='lostItemManage.lostItemInfoManage.basic'>
            <Button type="primary" onClick={() => exportCharts()} size="small">
              导出Excel
            </Button>
          </AuthComponent>,
          <AuthComponent authCode='lostItemManage.lostItemInfoManage.basic'>
            <Button type="primary" onClick={() => printIt(selectedRows)} size="small">
              打印
            </Button>
          </AuthComponent>
        ]}
        tableAlertRender={false}
        postData={data => {
          if (data.length === 0) {
            handleExportFlag(false)
          } else {
            handleExportFlag(true)
          }
          return data
        }}
        request={params => {
          // 重新请求时清空选择项
          clearSelection()
          return lostPageList(params, hiddenData)
        }}
        columns={columns}
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total, range) => `第${range[0]}-${range[1]}条 共 ${total} 项`,
          defaultPageSize: 20,
          pageSizeOptions: ['20', '30', '40']
        }}
        scroll={{ x: 900, y: height }}
      />
      {
        claimVisible && <ClaimForm
          onSubmit={async value => {
            const success = await handleClaim(value)
            if (success) {
              message.success('领取成功')
              handleClaimVisible(false)
              actionRef.current.reload()
            }
          }}
          onCancel={() => handleClaimVisible(false)}
          claimVisible={claimVisible}
        ></ClaimForm>
      }
      {
        scrappedPerishableGoodsVisible && <ScrappedPerishableGoods
          onCancel={() => {
            handleScrappedPerishableGoodsVisible(false)
            actionRef.current.reload()
          }}
          scrappedPerishableGoodsVisible={scrappedPerishableGoodsVisible}
        ></ScrappedPerishableGoods>
      }
      {
        lostItemPicVisible && <PicUpload
          onSubmit={async value => {
            const success = await handleImgs(value)
          }}
          onCancel={() => handleLostItemPicVisible(false)}
          lostItemPicVisible={lostItemPicVisible}
          lostItemPic={lostItemPic}
        ></PicUpload>
      }
      {
        lostItemPicManageVisible && <ShowPic
          onSubmit={async value => {
            const success = await handleDelImgs(value)
          }}
          toUpload={(value) => {
            handleLostItemPicture(value)
            handleLostItemPicManageVisible(false)
            handleLostItemPicVisible(true)
          }}
          onCancel={() => handleLostItemPicManageVisible(false)}
          lostItemPicManageVisible={lostItemPicManageVisible}
          lostItemPic={lostItemPic}
          status={itemData.closeState}
        ></ShowPic>
      }
    </>
  );
};

export default Form.create()(LostItemInfoManage);
